import React, { useState, useMemo, forwardRef, useImperativeHandle } from "react"
import {
    Button,
    Icon,
    ImgDefault,
    InputNumber,
    message,
    Modal,
    Popover,
    Radio,
    Slider,
    Space,
    Spin,
    Switch,
    Upload
} from "@bytedance/mona-ui"
import { generatedAiInit } from "./generatedAiImages"

function SetVideoContent(props: any, ref: any) {
    const { copyGoodConfig, goodsDetellData, picImages } = props
    const { copynum } = copyGoodConfig
    const [getConterisstatus, setGetConterisstatus] = useState(false)
    const [showUrlContent, setShowUrlContent] = useState('')
    const [renderConfig, setRenderConfig] = useState<any>(null)
    const [errMsgTest, setErrMsgTest] = useState('')
    useImperativeHandle(ref, () => ({
        renderConfig
    }))
    useMemo(() => {


        const { product_id, pic, category_detail, name, material_video_id } = goodsDetellData

        const item2 = JSON.parse(JSON.stringify(goodsDetellData.videoDatas))
        item2.material_video_id = material_video_id || ''
        item2.lodinStatus = false
        item2.itemFun = generatedAiInit({
            img_format: 1,
            product_id: product_id,
            optimize_strategy: '视频一键生成',
            stopRun: true,

            // url: item2.url,
            cb: function (data) {
                console.log('data', data)
                if (data.run_status === 3) {
                    item2.lodinStatus = false
                    message.error(data.errormsg)
                    setErrMsgTest(data.errormsg)
                    setRenderConfig({ ...item2 })
                    return
                }
                item2.lodinStatus = false
                item2.CoverUrl = data.optimized_video_infos[0].video_cover
                item2.PlayInfo.MainPlayUrl = data.optimized_video_infos[0].video_url
                item2.material_video_id = data.optimized_video_infos[0].vid
                setRenderConfig({ ...item2 })

            }.bind(item2),
            setGetAiImageLodinStatus: (status: any) => {


            }
        })

        setRenderConfig({ ...item2 })


    }, [picImages])
    if (!renderConfig) return null
    return <div className="moverbox">

        <div >
            <Space direction="vertical">
                <span>主图视频</span>
                <Space align="end">
                    <Spin spinning={renderConfig.lodinStatus}>
                        <div className="seterimage">
                            {renderConfig.CoverUrl ? <>

                                <ImgDefault src={renderConfig.CoverUrl} width={100} height={100}></ImgDefault>
                                {renderConfig.PlayInfo.MainPlayUrl && <div className="conterItemStatus" style={{
                                    zIndex: 99999999999
                                }}>
                                    <div className="itemcie">
                                        <Icon type="SeeIcon" className="setIcon" onClick={() => {
                                            setGetConterisstatus(true)
                                            setShowUrlContent(renderConfig.PlayInfo.MainPlayUrl)
                                        }}></Icon>
                                    </div>

                                    <div className="itemcie">
                                        <Icon type="DeleteIcon" className="setIcon" onClick={() => {
                                            renderConfig.CoverUrl = null
                                            renderConfig.PlayInfo.MainPlayUrl = null
                                        }}></Icon>
                                    </div>
                                </div>}
                            </> : <div>暂无视频</div>}


                        </div>
                    </Spin>

                    <Button loading={renderConfig.lodinStatus} onClick={() => {
                        // console.log('itemFun', picImages)
                        renderConfig.lodinStatus = true
                        setRenderConfig({ ...renderConfig })
                        setErrMsgTest('')
                        // console.log('itemFun', picImages)
                        const { product_id, pic, category_detail, name } = goodsDetellData
                        const tiuetrlits = [category_detail.first_cname, category_detail.second_cname, category_detail.third_cname, category_detail.fourth_cname]
                        renderConfig.itemFun.runOpenVideo({
                            customized_ai_powered_script: '[]',
                            customized_images: JSON.stringify(picImages.map((item) => item.url)),
                            product_industrys: JSON.stringify(tiuetrlits),// JSON.stringify(category_name.split('>')),
                            product_name: name,
                            video_ratio: '1',
                        })

                    }}>
                        <Space>
                            <ImgDefault imgSrc="https://wtplug.oss-cn-hangzhou.aliyuncs.com/webimages/icons/123456.png" width={16} height={16}></ImgDefault>
                            <span>一键生成视频</span>
                        </Space>

                    </Button>
                    {errMsgTest && <div style={{
                        color: 'red',
                        fontSize: 12,
                        width: '600px'
                        // marginLeft: 10
                    }}>{errMsgTest}</div>}
                </Space>
            </Space>

        </div>

        <Modal
            title="视频详情"
            visible={getConterisstatus}
            onCancel={() => {
                setGetConterisstatus(false)
                setShowUrlContent('')
            }}
            footer={null}
            width={500}
            destroyOnClose
        >

            <video src={showUrlContent} style={{
                width: '100%'
            }} controls></video>
        </Modal>
    </div>
}

export default forwardRef(SetVideoContent)